<template>
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="工号：">
            <el-input ref="flr" v-model="hmid" placeholder="请输入数字(不填代表所有)"></el-input>
        </el-form-item>
        <el-table
            :data="Homemasters"
            style="width: 100%"
            max-height="auto">
            <el-table-column
            fixed
            prop="hmid"
            label="工号"
            >
            </el-table-column>
            <el-table-column
            prop="password"
            label="密码"
            >
            </el-table-column>
            <el-table-column
            prop="name"
            label="姓名"
            >
            </el-table-column>
            <el-table-column
            prop="sex"
            label="性别"
            >
            </el-table-column>
            <el-table-column
            prop="phone"
            label="电话"
            >
            </el-table-column>
            <el-table-column
            prop="email"
            label="邮箱"
            >
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            >
            <template slot-scope="scope">
                <el-button
                @click.native.prevent="updataRow(scope.row)"
                type="primary"
                size="small">
                修改
                </el-button>
                <el-button
                @click.native.prevent="deleteRow(scope.row)"
                type="danger"
                size="small">
                移除
                </el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pagesize"
            :total="total"
            :current-page="currentPage"
            @current-change="pagechange"
        >
        </el-pagination>
        <i class="jiantou" @click="add()">{{AddClass == 'come'?'&gt;':'&lt;'}}</i>
        <Addhomemaster :hmid="hmmid" :class="'add '+ AddClass"></Addhomemaster>
    </el-form>
</template>

<script>
import Addhomemaster from '../components/Addhomemaster.vue'
export default {
    name:'Homemastermannager',
    components:{
        Addhomemaster,
    },
    data() {
        return {
            page:1,
            pagesize:10,
            Homemasters:[],
            total:0,
            currentPage:1,
            hmid:'',
            AddClass:'',
            hmmid:'',
        }
    },
    methods:{
        load(){
            let _this = this
            axios.get(`http://localhost:8081/homemaster/getHomemasters/1/${this.pagesize}?hmid=${this.hmid}`).then(function(resp){
                _this.total = resp.data.total
                _this.Homemasters = resp.data.records
                _this.page = 1
            })
        },
        reload(){
            let _this = this
            axios.get(`http://localhost:8081/homemaster/getHomemasters/${this.page}/${this.pagesize}?hmid=${this.hmid}`).then(function(resp){
                _this.Homemasters.splice(0)
                resp.data.records.forEach(element => {
                    _this.Homemasters.push(element)
                });
                _this.total = resp.data.total
            })
        },
        deleteRow(row){
            axios.get(`http://localhost:8081/homemaster/deleteOneHM/${row.hmid}`)
            setTimeout(() => {
                this.reload();
            }, 50);
        },
        updataRow(row){
            this.$router.push(`/edithomemaster?hmid=${row.hmid}`)
        },
        pagechange(currentPage){
            this.formInline.page = currentPage
            this.reload();
        },
        onSubmit(){
            this.load()
        },
        add(){
            if(this.AddClass == 'come'){
                this.load();
                this.reload();
                this.AddClass = 'leave'
            }else{
                this.AddClass = 'come'
            }
            this.getHmid()
        },
        getHmid(){
            const _this = this
            axios.get(`http://localhost:8081/homemaster/countAllByYear?year=${new Date().getFullYear()}`).then((res)=>{
                let time = new Date().getFullYear();
                let a
                if(res.data<10)
                    a = "00"+ (res.data+1)
                else if(res.data<100)
                    a = "0" + (res.data+1)
                _this.hmmid = "" + time + a
            })
        },
    },
    mounted(){
        this.load();
        this.reload()
        this.getHmid()
    },
    watch:{
        hmid(oldValue,newValue){
            this.onSubmit()
        }
    }
}
</script>

<style scoped>
    .el-form{
        margin-top: 25px;
        text-align: center;
    }
    .el-form-item{
        margin-right: 50px;
    }
    .el-button{
        margin-left: 0;
        margin-right: 10px;
    }
    .jiantou{
        cursor: pointer;
        position: absolute;
        right: 5%;
        top:15%;
        transform: translate(0,-50%);
        height: 40px;
        width: 80px;
        border-radius: 5%;
        border: 1px solid #bbbbbb;
        background-image: radial-gradient(
            25px at center,
            #0077227b,
            #00ff4871
        );
        line-height: 40px;
        color: #fff;
        font-size: 25px;
        text-align: center;
    }
    .jiantou:active{
        background-color: yellow;
    }
    .add{
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 3px 3px 6px 2px rgba(0, 0, 0, 0.5);
        z-index: 10;
        position: absolute;
        right: -10%;
        top:50%;
        transform: translate(115%,-65%);
    }
    @keyframes leave{
        from{
            transform: translate(-90%,-65%);
        }
        to{
            transform: translate(115%,-65%);
        }
    }
    @keyframes come{
        from{
            transform: translate(115%,-65%);
        }
        to{
            transform: translate(-90%,-65%);
        }
    }
    .leave{
        animation: leave 1s;
        transform: translate(115%,-65%);
    }
    .come{
        animation: come 1s;
        transform: translate(-90%,-65%);
    }
</style>